<!--
 * @Author: 陆成杰
 * @Date: 2022-06-29 09:23:48
 * @LastEditTime: 2022-07-03 14:28:24
 * @LastEditors: 陆成杰
 * @FilePath: /boe/src/views/program-manager/Material.vue
 * Copyright (c) ${now_year} by zucc-陆成杰, All Rights Reserved. 
-->
<template>
  <div>
    <div class="tab">
      <div class="tab-item1" @click="gopicture">图片</div>
      <div class="tab-item2" @click="govedio">视频</div>
      <div class="tab-item3" @click="gosudio">音频</div>
      <div class="tab-item4" @click="goart">艺术</div>
      <div class="tab-item5" @click="gochina">党政</div>
    </div>
    <div class="search">
      <input type="text" />
    </div>
    <div style="margin-top: 20px; margin-left: 5%">
      <el-scrollbar height="650px">
        <div v-if="state.num == 0">
          <div v-for="(item, index) in state.picList" :key="index">
            <div
              style="margin-top: 10px; display: flex"
              @click="chooseImg(item.key)"
            >
              <el-image
                style="width: 100px; height: 100px"
                :src="item.key"
                fit="fill"
              />
              <div class="img-title">{{ item.mimeType }}</div>
            </div>
          </div>
        </div>
        <div v-if="state.num == 1">2</div>
        <div v-if="state.num == 2">3</div>
        <div v-if="state.num == 3">4</div>
        <div v-if="state.num == 4">
          <div v-for="(item, index) in state.picList" :key="index">
            <div
              style="margin-top: 10px; display: flex"
              @click="chooseImg(item)"
            >
              <el-image
                style="width: 100px; height: 100px"
                :src="item.key"
                fit="fill"
              />
              <div class="img-title">{{ item.mimeType }}</div>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive } from "vue";
import { getList } from "../../axios/material";

const state = reactive({
  item1: 0,
  item2: 0,
  item3: 0,
  item4: 0,
  item5: 0,
  num: 0,
  picList: [],
});

const emit = defineEmits(["on-click"]);
const chooseImg = (url) => {
  emit("on-click", url);
};

onMounted(() => {
  picList();
});

const picList = () => {
  getList().then((res) => {
    state.picList = res.data;
    for (let i = 0; i < state.picList.length; i++) {
      state.picList[i].key = "http://cdn.yuzzl.top/" + state.picList[i].key;
      let str = state.picList[i].key;
      str = str.split("/").at(-1);
      state.picList[i].mimeType = str;
    }
  });
};

const gopicture = () => {
  console.log(document.getElementsByClassName("tab-item1")[0].style);
  if (state.item1 == 0) {
    document.getElementsByClassName("tab-item1")[0].style.backgroundColor =
      "#2895ff";
    document.getElementsByClassName("tab-item1")[0].style.color = "#fff";
    document.getElementsByClassName("tab-item2")[0].style.backgroundColor =
      "#282935";
    document.getElementsByClassName("tab-item2")[0].style.color = "#bfbec2";
    document.getElementsByClassName("tab-item3")[0].style.backgroundColor =
      "#282935";
    document.getElementsByClassName("tab-item3")[0].style.color = "#bfbec2";
    document.getElementsByClassName("tab-item4")[0].style.backgroundColor =
      "#282935";
    document.getElementsByClassName("tab-item4")[0].style.color = "#bfbec2";
    document.getElementsByClassName("tab-item5")[0].style.backgroundColor =
      "#282935";
    document.getElementsByClassName("tab-item5")[0].style.color = "#bfbec2";
    state.item1 = 1;
  } else {
    // document.getElementsByClassName("tab-item1")[0].style.backgroundColor = '#282935'
    // document.getElementsByClassName("tab-item1")[0].style.color = '#bfbec2'
    state.item1 = 0;
  }
  state.num = 0;
};
const govedio = () => {
  if (state.item2 == 0) {
    document.getElementsByClassName("tab-item2")[0].style.backgroundColor =
      "#2895ff";
    document.getElementsByClassName("tab-item2")[0].style.color = "#fff";
    document.getElementsByClassName("tab-item1")[0].style.backgroundColor =
      "#282935";
    document.getElementsByClassName("tab-item1")[0].style.color = "#bfbec2";
    document.getElementsByClassName("tab-item3")[0].style.backgroundColor =
      "#282935";
    document.getElementsByClassName("tab-item3")[0].style.color = "#bfbec2";
    document.getElementsByClassName("tab-item4")[0].style.backgroundColor =
      "#282935";
    document.getElementsByClassName("tab-item4")[0].style.color = "#bfbec2";
    document.getElementsByClassName("tab-item5")[0].style.backgroundColor =
      "#282935";
    document.getElementsByClassName("tab-item5")[0].style.color = "#bfbec2";
    state.item2 = 1;
  } else {
    // document.getElementsByClassName("tab-item2")[0].style.backgroundColor = '#282935'
    // document.getElementsByClassName("tab-item2")[0].style.color = '#bfbec2'
    state.item2 = 0;
  }
  state.num = 1;
};
const gosudio = () => {
  if (state.item3 == 0) {
    document.getElementsByClassName("tab-item3")[0].style.backgroundColor =
      "#2895ff";
    document.getElementsByClassName("tab-item3")[0].style.color = "#fff";
    document.getElementsByClassName("tab-item1")[0].style.backgroundColor =
      "#282935";
    document.getElementsByClassName("tab-item1")[0].style.color = "#bfbec2";
    document.getElementsByClassName("tab-item2")[0].style.backgroundColor =
      "#282935";
    document.getElementsByClassName("tab-item2")[0].style.color = "#bfbec2";
    document.getElementsByClassName("tab-item4")[0].style.backgroundColor =
      "#282935";
    document.getElementsByClassName("tab-item4")[0].style.color = "#bfbec2";
    document.getElementsByClassName("tab-item5")[0].style.backgroundColor =
      "#282935";
    document.getElementsByClassName("tab-item5")[0].style.color = "#bfbec2";
    state.item3 = 1;
  } else {
    // document.getElementsByClassName("tab-item3")[0].style.backgroundColor = '#282935'
    // document.getElementsByClassName("tab-item3")[0].style.color = '#bfbec2'
    state.item3 = 0;
  }
  state.num = 2;
};
const goart = () => {
  if (state.item4 == 0) {
    document.getElementsByClassName("tab-item4")[0].style.backgroundColor =
      "#2895ff";
    document.getElementsByClassName("tab-item4")[0].style.color = "#fff";
    document.getElementsByClassName("tab-item1")[0].style.backgroundColor =
      "#282935";
    document.getElementsByClassName("tab-item1")[0].style.color = "#bfbec2";
    document.getElementsByClassName("tab-item2")[0].style.backgroundColor =
      "#282935";
    document.getElementsByClassName("tab-item2")[0].style.color = "#bfbec2";
    document.getElementsByClassName("tab-item3")[0].style.backgroundColor =
      "#282935";
    document.getElementsByClassName("tab-item3")[0].style.color = "#bfbec2";
    document.getElementsByClassName("tab-item5")[0].style.backgroundColor =
      "#282935";
    document.getElementsByClassName("tab-item5")[0].style.color = "#bfbec2";
    state.item4 = 1;
  } else {
    // document.getElementsByClassName("tab-item4")[0].style.backgroundColor = '#282935'
    // document.getElementsByClassName("tab-item4")[0].style.color = '#bfbec2'
    state.item4 = 0;
  }
  state.num = 3;
};
const gochina = () => {
  if (state.item5 == 0) {
    document.getElementsByClassName("tab-item5")[0].style.backgroundColor =
      "#2895ff";
    document.getElementsByClassName("tab-item5")[0].style.color = "#fff";
    document.getElementsByClassName("tab-item1")[0].style.backgroundColor =
      "#282935";
    document.getElementsByClassName("tab-item1")[0].style.color = "#bfbec2";
    document.getElementsByClassName("tab-item2")[0].style.backgroundColor =
      "#282935";
    document.getElementsByClassName("tab-item2")[0].style.color = "#bfbec2";
    document.getElementsByClassName("tab-item3")[0].style.backgroundColor =
      "#282935";
    document.getElementsByClassName("tab-item3")[0].style.color = "#bfbec2";
    document.getElementsByClassName("tab-item4")[0].style.backgroundColor =
      "#282935";
    document.getElementsByClassName("tab-item4")[0].style.color = "#bfbec2";
    state.item5 = 1;
  } else {
    // document.getElementsByClassName("tab-item5")[0].style.backgroundColor = '#282935'
    // document.getElementsByClassName("tab-item5")[0].style.color = '#bfbec2'
    state.item5 = 0;
  }
  state.num = 4;
};
</script>

<style lang="less" scoped>
.tab {
  display: flex;
  color: #bfbec2;
  font-size: 14px;
  margin-left: 5%;
  &-item1,
  &-item2,
  &-item3,
  &-item4,
  &-item5 {
    width: 18%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border: 1px solid #2895ff;
  }
}
.search input {
  width: 87%;
  margin-left: 5%;
  height: 25px;
  margin-top: 15px;
  background-color: #282935;
  border: 1px solid #2895ff;
  background-image: url(../../assets/program/search.svg);
  background-repeat: no-repeat;
  background-size: 15px 15px;
  background-position: 95%;
  border-radius: 3px;
}
.img-title {
  color: #fff;
  line-height: 100px;
  margin-left: 10px;
}
</style>